<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:insert="~{include :: header('分类树选择')}" />
    <th:block th:insert="~{include :: ztree-css}" />
</head>
<body class="hold-transition">
<div class="container-fluid mt-2 mb-2">
    <input id="channelId"   name="channelId"    type="hidden" th:value="${channelId}"/>
    <input id="categoryId"   name="categoryId"    type="hidden" th:value="${category?.categoryId}"/>
    <input id="categoryName" name="categoryName"  type="hidden" th:value="${category?.categoryName}"/>
    <div class="treeExpandCollapse">
        <a href="#" onclick="$.tree.expand()">展开</a> /
        <a href="#" onclick="$.tree.collapse()">折叠</a>
        (<span style="color: red;">双击分类确定选择</span>)
    </div>
    <div id="tree" class="ztree layui-treeselect"></div>
</div>
<th:block th:insert="~{include :: footer}" />
<th:block th:insert="~{include :: ztree-js}" />
<script th:inline="javascript">
    var channelId = [[${channelId}]];
    $(function() {
        var url = "/category/tree.json?channelId=" + channelId;
        var options = {
            url: url,
            expandLevel: 1,//展开到第几级
            onClick: zOnClick,
            onDblClick: zTreeOnDblClick
        };
        $.tree.init(options);
    });
    function zTreeOnDblClick(event, treeId, treeNode) {
        parent.setCategory(treeNode.id, treeNode.name);
        parent.layer.closeAll();
    }
    function zOnClick(event, treeId, treeNode) {
        $("#categoryId").val(treeNode.id);
        $("#categoryName").val(treeNode.name);
    }
</script>
</body>
</html>